<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      background: #f00;
    }
    .blue {
      color: blue;
    }
    .m {
      margin-top: 100px;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h1
    class=""
    style="background-image: url('lyf.webp')"
  >{{msg}}</h1>-->

  <!--<h1
    class=""
    v-bind:style="'background-image: url(' + imgSrc + ')'"
  >{{msg}}</h1>-->
<!--  <div class="" class=""></div>-->

  <!--<h1
    class="m"
    :class="{active: isActive, blue: isBlue}"
  >{{msg}}</h1>-->

  <!--<h1
    class="m"
    :class="`${isActive ? 'active' : ''}`"
  >{{msg}}</h1>-->

  <!--<h1
    class="m"
    :style="{color: activeColor, fontSize: fontSize + 'px', backgroundImage: imgSrc}"
    :class="[isActive, isBlue]"
  >{{msg}}</h1>-->
  <h1
    class="m"
    style="height: 200px"
    :style="styleObject"
    :class="[isActive, isBlue]"
  >{{msg}}</h1>
</div>

<script src="vue.js"></script>
<script>
  let app = new Vue({
    data: {
      activeColor: 'yellow',
      fontSize: '100',
      styleObject: {
        color: 'red',
        fontSize: '50px',
        background: '#000'
        // backgroundImage: this.imgSrc
      },
      msg: 'hello vue',
      imgSrc: `url(lyf.webp)`,
      // isActive: true,
      // isBlue: false,
      isActive: 'active',
      isBlue: 'blue',
      classObject: {
        active: true,
        'text-danger': false
      }
    },
    created() {
      this.styleObject = {
        ...this.styleObject,
        backgroundImage: this.imgSrc
      }
    }
  }).$mount('#app')

  /*
  new Vue({
    el: '#app'
  })
  */
</script>
</body>
</html>